<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title></title>
	</head>
	<body>
		<style>
		  .box-wrap {
		    height: 500px;
			width: 200px;
		    overflow-y: auto;
			border: 1px solid #000;
		  }
		
		  .box {
		    height: 50px;
		    text-align: center;
		  }
		</style>
		
		<div class="box-wrap" id="box">
		  <div class="box">打开控制台查看1</div><div class="box">打开控制台查看11</div><div class="box">打开控制台查看111</div><div class="box">打开控制台查看</div><div class="box">打开控制台查看</div>
		  <div class="box">打开控制台查看2</div><div class="box">打开控制台查看22</div><div class="box">打开控制台查看222</div><div class="box">打开控制台查看</div><div class="box">打开控制台查看</div>
		  <div class="box">打开控制台查看3</div><div class="box">打开控制台查看33</div><div class="box">打开控制台查看333</div><div class="box">打开控制台查看</div><div class="box">打开控制台查看</div>
		</div>
		
		<script>
		  // 监听滚动
		  let box = document.querySelector("#box");
		  box.addEventListener("scroll", function (e) {
		    let scrollTop = e.target.scrollTop;
		    let clientHeight = e.target.clientHeight;
		    let scrollHeight = e.target.scrollHeight;
			console.log("距顶部:",scrollTop,"--可视区高度",clientHeight,"--滚动条总高度:",scrollHeight,"--距顶部 + 可视区高度:",scrollTop + clientHeight)
		    // // 打印数值
		    // console.table([
		    //   {
		    //     label: "距顶部",
		    //     value: scrollTop,
		    //   },
		    //   {
		    //     label: "可视区高度",
		    //     value: clientHeight,
		    //   },
		    //   {
		    //     label: "滚动条总高度",
		    //     value: scrollHeight,
		    //   },
		    //   {
		    //     label: "距顶部 + 可视区高度",
		    //     value: scrollTop + clientHeight,
		    //   },
		    // ]);
		  });
		</script>
	</body>
</html>